<template>
  <div class='u-selectAttrList'>
    <el-row type='flex'>
      <el-col :span='6'>属性名称</el-col>
      <el-col :span='12'>
        <el-select v-model='selectAttr' @change='getClasses'>
          <el-option v-for='v in attrList' :key='v.id' :label='v.name' :value='v.id' />
        </el-select>
      </el-col>
    </el-row>
    <el-row type='flex' v-show='selectAttr && classes.length'>
      <el-col :span='6'>一级分类</el-col>
      <el-col :span='12'>
        <el-select v-model='selectClasses'  @change='getClasses2'>
          <el-option v-for='v in classes' :key='v.id' :label='v.name' :value='v.id' />
        </el-select>
      </el-col>
    </el-row>
    <el-row type='flex' v-show='selectClasses' @change='changeClassese'>
      <el-col :span='6'>二级分类</el-col>
      <el-col :span='12'>
        <el-select v-model='selectClasses2'>
          <el-option v-for='v in classes2' :key='v.id' :label='v.name' :value='v.id' />
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'selectAttrListDialog',

  props: ['aType'],

  data() {
    return {
      attrList: [],
      selectAttr: '',
      classes: [],
      selectClasses: '',
      classes2: [],
      selectClasses2: ''
    }
  },

  mounted() {
    this.getAllAttrAndClass()
  },

  methods: {
    async getAllAttrAndClass() {
      const { code, data } = await this.$api.utilsGetAllClasses({
        aMerchantId: this.aFirmId, aType: this.aType
      })
      if (code === 0) {
        this.formatAttrAndClassData(data.list.map(v => v.value_type === '0'))
      }
    },

    formatAttrAndClassData(data) {
      this.attrList = data.map(v => {
        const classes = []
        v.classes.forEach(v2 => {
          if (!v2.pid && !v2.pvalue) {
            classes.push({
              ...v2,
              child: []
            })
          }
        })
        v.classes.forEach(v2 => {
          const parId = v2.pid || v2.pvalue
          if (parId) {
            classes.some(v3 => {
              if (parId === v3.id) {
                v3.child.push(v2)
                return true
              }
            })
          }
        })
        return {
          ...v,
          classes
        }
      })
    },

    getClasses(value) {
      this.classes = []
      this.classes2 = []
      this.selectClasses = ''
      this.selectClasses2 = ''
      const obj = this.attrList.filter(v => v.id === value)[0]
      console.log(obj)
      if (obj.value_type === '0') {
        this.classes = obj.classes
      }
      this.emit()
    },

    getClasses2(value) {
      this.classes2 = []
      this.selectClasses2 = ''
      this.classes2 = this.classes.filter(v => v.id === value)[0].child
      this.emit()
    },

    changeClassese() {
      this.emit()
    },

    emit() {
      this.$emit('update', this.selectAttr, this.selectClasses, this.selectClasses2)
    }
  }
}
</script>

<style lang='less' >
.u-selectAttrList {
  .el-row {
    align-items: center;
    padding-bottom: 20px;
  }
}
</style>